<template>
  <h4>商品管理</h4>
  <MyTable :goodsList="goodsList">
    <template #header>
      <th scope="col">#</th>
      <th scope="col">商品名称</th>
      <th scope="col">价格</th>
      <th scope="col">标签</th>
      <th scope="col">操作</th>
    </template>
    <template #body="{row, index}">
      <td>{{ index + 1 }}</td>
      <td>{{ row.goodsName }}</td>
      <td>{{ row.goodsPrice }}</td>
      <td>{{ row.tags }}</td>
      <td>
        <button type="button" class="btn btn-outline-danger btn-sm">删除</button>
      </td>
    </template>
  </MyTable> 
</template>


<script setup>
    import { ref } from 'vue'
    import MyTable from './components/MyTable.vue';
    const goodsList = ref ([
      {
        id: 1,
        goodsName: '夏季专柜同款女鞋',
        goodsPrice: 298,
        tags: ['舒适', '透气'],
        inputValue: '',
        inputVisible: false
      },
      {
        id: 2,
        goodsName: '冬季保暖女士休闲雪地靴',
        goodsPrice: 89,
        tags: ['保暖', '防滑'],
        inputValue: '',
        inputVisible: false
      },
      {
        id: 3,
        goodsName: '秋季新款女士毛衣',
        goodsPrice: 199,
        tags: ['秋冬', '毛衣'],
        inputValue: '',
        inputVisible: false
      }
    ])
</script>